<template>
	<view class="bg pt-60">
		<view class="text-center ">
			<image :src="info.image" class="orderImg radius-20" mode="aspectFill"></image>
			<view class="white size-30 mt-20">{{ info.name }}</view>
			<view class="mtb-30 white bold size-36"> ￥{{ info.price }} </view>
			<!-- <view class="white mb-60 size-30">
				订单号：{{info.order_num}}
			</view>
			<view class="white mt-60 size-30">
				下单时间：{{info.create_time}}
			</view> -->
		</view>
		<!-- 支付 -->
		<!-- #ifdef H5 -->
		<!-- view class="plr-30 ptb-30" v-if="isWx==true">
			<view class="text-center white bold mb-60 size-32">
				请选择支付方式
			</view>
			<radio-group @change="radioChange">
				<label class="flex mb-40 flex-between" v-for="(item, index) in listWx" :key="item.value">
					<view class="flex white">
						<image src="../../static/balance.png" mode="" class="payIcon mr-20" v-if="index==0"></image>
						<image src="../../static/wx.png" mode="" class="payIcon mr-20" v-if="index==1"></image>
						<view>{{item.name}}<text v-if="index==0" class="size-26 red">（{{userAccount}})</text></view>
						<view>
						</view>
					</view>
					<radio :value="item.value" :checked="index === current" color="#EFAA1C" />
				</label>
			</radio-group>
	</view> -->
	<!-- 普通H5环境 -->
	<!-- <view class="plr-30 ptb-30" v-if="isWx==false">
			<view class="text-center white  bold mb-60 size-32">
				请选择支付方式
			</view>
			<radio-group @change="radioChange">
				<label class="flex mb-40 flex-between" v-for="(item, index) in list" :key="item.value">
					<view class="flex white">
						<image src="../../static/balance.png" mode="" class="payIcon mr-20"></image>
						<view>{{item.name}}<text v-if="index==0" class="size-26 red">（{{userAccount}})</text></view>
						<view>
						</view>
					</view>
					<radio :value="item.value" :checked="index === current" color="#EFAA1C" />
				</label>
			</radio-group>
		</view> -->
	<!-- #endif -->
	<!-- app环境 -->
	<view class="plr-40 mt-100">
		<view class="white bold size-30 pb-30 pl-10" style="border-bottom: 2rpx solid #EBEBEB;"> 请选择支付方式 </view>
		<view class="">
			<view @click="current = item.value" class="flex pt-30 pb-30 flex-between"
				style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in list" :key="item.value">
				<view class="flex white">
					<image :src="item.image" class="payIcon mr-20" mode=""></image>
					<view>{{ item.name }}<text v-if="item.value == 0" class="size-26 gold">（{{ userAccount }})</text>
					</view>
					<view> </view>
				</view>
				<image src="/static/select-pink.png" mode="" v-if="current == item.value"
					style="width: 32rpx;height: 32rpx;"></image>
				<image src="/static/selects.png" mode="" v-else style="width: 32rpx;height: 32rpx;"></image>
			</view>
		</view>
	</view>
	<view class="pr-30 pl-30 mt-100">
		<u-button hover-class="none" @click="affirmPay" class="payBtn">确认支付</u-button>
	</view>
	<!-- 支付密码弹窗 S -->
	<u-popup v-model="showPassword" width="90%" mode="center" border-radius="16">
		<view class="pl-30 pr-30 pt-30 pb-30">
			<view class="text-center mb-20 size-26">请输入密码</view>
			<u-message-input disabled-keyboard :maxlength="6" :dot-fill="true" :value="password"></u-message-input>
			
			<!-- <u-button class="mt-20">支付</u-button> -->
		</view>
	</u-popup>
	<u-keyboard ref="uKeyboard" :mask-close-able="false" :confirm-btn="false" :show-tips="false" @cancel="cancelKey" @backspace="backspace" @change="changePassword" :mask="false" v-model="keyShow" :dot-enabled="false"></u-keyboard>
	<!-- 支付密码弹窗 E -->
	</view>
</template>

<script>
	const module = uni.requireNativePlugin('SandPayTypeModule')
	export default {
		data() {
			return {
				userAccount: 0,
				list: [
					{
						value: '0',
						name: '余额支付',
						image:'/static/yue.png'
					}, 
					// #ifdef H5
					// {
					// 	name:'杉德',
					// 	value:7,
					// 	image:'/static/sahnde.png'
					// },
					// #endif
					// #ifdef APP-PLUS
					// {
					// 	name:'杉德',
					// 	value:8,
					// 	image:'/static/sahnde.png'
					// },
					// #endif
					// {
					// 	value: '1',
					// 	name: '支付宝',
					// 	image: '/static/zhifubao.png'
					// },
					// {
					// 	value: '2',
					// 	name: '微信',
					// 	image: '/static/weixin.png'
					// }
				],
				current: 0,
				info: {},
				isWx: false,
				btnDisabled: false,
				config_appid: '',
				id: "",
				password:'',
				showPassword:false,//密码弹框
				keyShow:false,
			}
		},
		onLoad(options) {
			this.id = options.order_id;
			this.$http('api/orders/boxOrderDetail', {
				id: this.id
			}).then(res => {
				this.info = res;
			})
		},
		onShow() {
			this.$http('api/account/account').then(res => {
				this.userAccount = res.account;
			})
			this.$http('api/login/serverConfig').then(res => {
				this.config_appid = res.wx_global_app_id;
			})
			// 判断是否为微信环境
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			let url = window.location.href;
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				if (url.indexOf("code") != -1) {
					let code = url
						.split("?")[1]
						.split("&")[0]
						.split("=")[1];

					this.$http('api/user/auth', {
						code: code
					}, "POST").then(res => {})
				}
				this.isWx = true;
			} else {
				this.isWx = false;
			}
			// #endif
		},
		methods: {
			confirmKey () {
				console.log(e);
			},
			backspace () {
				this.password = this.password.substring(0,this.password.length-1)
			},
			//取消输入
			cancelKey () {
				this.password = ''
				this.showPassword = false
			},
			changePassword (e) {
				if (this.password.length < 6) {
					this.password+=e
					if (this.password.length == 6) {
						this.keyShow = false
						this.showPassword = false
						this.toPay()
					}
				} else {
					this.keyShow = false
					this.showPassword = false
				}
				
			},
			radioChange(e) {
				this.current = e.detail.value;
			},
			affirmPay () {
				if (this.current == 0) {
					if (this.userAccount < this.info.price) return uni.showToast({
						title:'余额不足，请充值',
						icon:'none'
					})
					this.showPassword = true
					this.keyShow = true
				} else {
					this.toPay()
				}
			},
			toPay() {
				let _this = this;
				if (this.current == -1) {
					uni.showToast({
						title: "请选择支付方式!",
						icon: "none"
					})
					return;
				}
				this.btnDisabled = true;
				// 余额抵扣
				if (this.current == 0) {
					// H5环境
					this.$http('api/orders/boxPay', {
						id: this.id,
						pay_type: 1,
						password:this.password
					}).then(res => {
						this.password = ''
						this.btnDisabled = false;
						this.buyShow = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/my/index'
							})
						}, 800)
					}).catch(res => {
						this.password = ''
					})
				} else if (this.current == 7) {
					this.$http('api/orders/boxPay', {
					  id: this.id,
					  pay_type: this.current
					}).then(res => {
						// #ifdef H5
							location.href = res.pay
						// #endif
						// #ifdef APP-PLUS
							if (plus.os.name.toLowerCase() == 'ios') {
								plus.runtime.openURL(res.pay)
							} else {
								uni.setStorageSync('payUrl',res.pay)
								uni.navigateTo({
									url: '/pages/pay/web'
								})
							}
						// #endif
						this.btnDisabled = false
						this.buyShow = false
					  
					}).catch(()=>{
						
					})
				} else if (this.current == 8) {
					this.$http('api/orders/boxPay', {
					  id: this.id,
					  pay_type: this.current
					}).then(res => {
						module.cashierPayMulti(res.pay, (res)=>{
							setTimeout(() => {
								uni.switchTab({
									url:'/pages/my/index'
								})
							}, 800)
						})
					  
					}).catch(()=>{
						
					})
					
				}
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="less" scoped>
	.white {
		color: #3c3c3c;
	}
	.gold {
  color: #9c8b66;
}
	.payBtn {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		height: 88rpx !important;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 44px;
		&::after {
			border: none;
		}
	}

	.payIcon {
		width: 48rpx;
		height: 48rpx;
	}

	.orderImg {
		width: 200rpx;
		display: block;
		margin: 0 auto;
		height: 200rpx;
	}
</style>
